<script setup lang="ts">
import MARKER_ICON from '@/assets/marker-icon.png'
import { ref } from 'vue'

const alpha = ref(100.0)
const brightness = ref(100.0)
const contrast = ref(100.0)
const provider = ref(null)
const enableMapTerrain = ref(false)
const enableImageryAnnotationLayer = ref(false)

const onViewerReady = ({ Cesium, viewer }: any) => {
    // imageryProvider.value = new Cesium.ArcGisMapServerImageryProvider({
    //     url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    // })
    // let target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116)
    // let offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162)
    // viewer.camera.lookAt(target, offset)

    Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.0
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
        /* 青岛市左下角：经度，纬度 */
        120.35, 36.04,
        /* 青岛市右上角：经度，纬度 */
        120.50, 36.14
    )
    viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(120.42451, 36.06500, 0.150*1000),
        orientation: {
            heading : Cesium.Math.toRadians(0),
            pitch : Cesium.Math.toRadians(-5),
            roll : Cesium.Math.toRadians(0)
        },
    })
    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
}

const model = ref(null)

const position = {
    lng: 120.4243,
    lat: 36.0734,
    height: 45
}
const label= {
    text: '中电科22所停车场',
    pixelOffset: [0, -45]
}
const distanceDisplayCondition = { near: 0, far: 20000000 }
const horizontalOrigin = 0
const scale = ref(1)
const show = ref(true)
const billboard = ref(null)
// methods
const onEntityEvt = (e: any) => {
    console.log(e)
    if (e.type === 'onmouseover') {
        scale.value = 1.25
    } else if (e.type === 'onmouseout') {
        scale.value = 1
    }
}
</script>

<template>
    <div id="main_container">
        <vc-viewer @ready="onViewerReady" :homeButton="true">
            <vc-status-bar position="bottom-right" :offset="[120, 3]" :show-performance-info="false">
            </vc-status-bar>
            <vc-entity
                :name="label.text"
                description="中国电波传播研究所（青大一路19号）"
                :position="position"
                :label="label"
                :scale="scale"
                :show="show"
                @click="onEntityEvt"
                @mouseover="onEntityEvt"
                @mouseout="onEntityEvt">
                <vc-graphics-billboard
                    ref="billboard"
                    :name="label.text"
                    :image="MARKER_ICON"
                    :scale="scale"
                    :show="show"
                    :distance-display-condition="distanceDisplayCondition"
                    :horizontal-origin="horizontalOrigin"
                ></vc-graphics-billboard>
            </vc-entity>
            <vc-layer-imagery :alpha="alpha/100.0" :brightness="brightness/100.0" :contrast="contrast/100.0" :sort-order="10">
                <vc-imagery-provider-arcgis ref="provider"></vc-imagery-provider-arcgis>
            </vc-layer-imagery>
            <div v-if="enableMapTerrain">
                <vc-terrain-provider-arcgis ref="provider"></vc-terrain-provider-arcgis>
            </div>
            <div v-if="enableImageryAnnotationLayer">
                <!-- 天地图cia（路网信息）图层： -->
                    <vc-layer-imagery ref="layerText" :maximum-terrain-level="19">
                    <vc-imagery-provider-tianditu
                        token="e7894a985fe457b58ef9c65beae0619a"
                        mapStyle="cia_w"
                    >
                    </vc-imagery-provider-tianditu>
                </vc-layer-imagery>
            </div>
        </vc-viewer>
        <div class="my_toolbar">
            <el-row>
                <span class="my_label">不透明度</span>
                <el-slider class="my_slider" v-model="alpha" :min="0" :max="100" :step="1" show-input size="default"></el-slider>
            </el-row>
            <el-row>
                <span class="my_label">亮度</span>
                <el-slider class="my_slider" v-model="brightness" :min="0" :max="200" :step="1" show-input size="default"></el-slider>
            </el-row>
            <el-row>
                <span class="my_label">对比度</span>
                <el-slider class="my_slider" v-model="contrast" :min="0" :max="200" :step="1" show-input size="default"></el-slider>
            </el-row>
            <el-row>
                <span class="my_label">地形渲染</span>
                <el-switch v-model="enableMapTerrain"></el-switch>
                <span class="my_label_next">叠加路网注记图层</span>
                <el-switch v-model="enableImageryAnnotationLayer"></el-switch>
            </el-row>
        </div>
    </div>
</template>

<style scoped lang="scss">
#main_container {
    color: gold;
    //border: solid 1px red;
    width: inherit;
    height: 800px;
}
.my_toolbar {
    position: fixed;
    left: 5px;
    top: 80px;
    margin: 10px;
    padding: 15px;
    background-color: rgba(15, 15, 15, 0.625);
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.125);
    text-align: right;
}
.my_label {
    display: flex;
    align-items: center;
    justify-content: right;
    width: 80px;
    padding: 0 12px 0 0;
}
.my_label_next {
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 0 12px;
}
.my_slider {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    width: 300px;
}
.slider-demo-block {
    display: flex;
    align-items: center;
}
.slider-demo-block .el-slider {
    margin-top: 0;
    margin-left: 12px;
}
</style>
